<template>
    <div class="page">
       <div class="label" @click="btnClick" v-if="isLable">
         <el-button color="#BC81FC" :icon="label.icon" style="color: #000;">{{label.text}}</el-button>
       </div>
       <div class="total-box">
        <div class="total">共 {{ totalPage }} 页</div>
        <div v-if="isShowTotal" class="total">{{ total }} 条</div>
        <el-pagination background layout="prev, pager, next" :page-size="pageSize" :default-page-size="6" :total="total"  
        :current-page="currentPage"
        @current-change="sizeChange"
        />
       </div>
    </div>

</template>
<script setup lang="ts">
import {computed} from 'vue';
const props = defineProps<{
    label?: any,
    isLable: boolean,
    total?: number | string,
    pageSize?: number | string,
    currentPage?: number | string,
    isShowTotal?: boolean
}>()

let totalPage = computed(() => {
    return Math.floor((Number(props.total) / Number(props.pageSize))) + 1
})
const emit = defineEmits(['labelClick', 'pageClick'])
const btnClick = (): void => {
    emit('labelClick', props.label.text)
}

const sizeChange = (e: number | string) => {
    console.log(e);
    emit('pageClick', e)
}

</script>
<style lang="css" scoped>
.page {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}
.total-box {
    display: flex;
    align-items: center;
    color: #fff;
}
.total {
    margin-right: 20px;
    font-size: 12px;
}

/* :deep(.el-button) {
    background: #C9ACF2;
    border: 1px solid #C9ACF2;
    color: #000;
} */
:deep(.el-pagination button) {
    background: #3F3B42 !important;
}
:deep(.el-pagination .el-icon) {
    color: #fff !important;
}
:deep(.el-pagination .el-icon:hover) {
    color: #8252B3 !important;
}
:deep(.el-pagination.is-background .el-pager li.is-active){
    background-color: #8252B3 !important;
}
:deep(.el-pagination.is-background .el-pager li){
    margin:0 6px;
}
:deep(.el-pager li) {
    background: #3F3B42 !important;
    color:#fff;
}
</style>